<script setup>
const props = defineProps(['file'])
const file = props.file
import { getCookie } from '@/utils/cookie.utils';
import { Download } from '@element-plus/icons-vue'

import service from '@/utils/request.utils';

function download() {
    const downloadUrl = import.meta.env.VITE_API_ADDR + "/" + "download/document?hubId=" + file.hub_id + "&fileId=" + file.id + "&token=" + getCookie("token")
    window.open(downloadUrl, '_blank')
}

async function restartFileDeal() {
    let res = await service.post("/file/reload", { "fileId": file.id, "hubId": file.hub_id })

}

</script>
<template>
    <div class="outer">
        <div class="title">
            {{ file.file_name }}
        </div>
        <el-button type="info" class="download" @click="download" :icon="Download">
            下载
        </el-button>
        <div style="position: relative; bottom: 3em;">
            <el-alert v-if="file.state == 0" title="文件后台处理中" type="info" :closable="false" style="cursor:wait;"></el-alert>
            <el-alert v-if="file.state == 2" title="处理失败" type="warning" :closable="false"></el-alert>
            <el-button v-if="file.state == 2" type="success" @click="restartFileDeal"
                style="postion:relative; top: 0.2em;">重启处理任务</el-button>
        </div>
        <div class="footer">
            上传时间： {{ file.create_at }}
        </div>
    </div>
</template>
<style scoped>
.outer {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.title {
    padding-top: 0.5em;
    width: 100%;
    text-align: center;
}


.download {
    display: flex;
    margin: auto
}

.footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: rgb(120, 120, 120);
    font-size: small;
    padding-bottom: 1em;
    padding-right: 10px;
}
</style>